<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../js/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../css/common.css" media="all">
    <script src="../../js/layui/layui.all.js"></script>
    <script src="../../js/token.js"></script>
    <script src="../../js/config.js"></script>
</head>
<body>

<div class="layui-fluid">
    <div class="layui-card">
        <ul id="demo1"></ul>
    </div>
    <div style="text-align: center;">
        <button class="layui-btn layuiadmin-btn-admin save" style="display: none">保存</button>
    </div>
</div>
</body>

<script>
    var $ = layui.$ //由于layer弹层依赖jQuery，所以可以直接得到
    var layer = layui.layer
    var tree = layui.tree;
    var Alldata;
    $.ajax({
       type:'get',
       url:HOST+'admin/permission/findAllPermission',
        async:false,
        success:function (data) {
           if (data.code == 200){
               Alldata = data.data.data;
           }
       }
    });

    var inst1 = tree.render({
        id:'demo1',
        elem: '#demo1',  //绑定元素
        showCheckbox:true,
        edit: ['add', 'update', 'del','updateUrl'],
        operate: function(obj){
            var type = obj.type; //得到操作类型：add、edit、del
            var data = obj.data; //得到当前节点的数据
            var elem = obj.elem; //得到当前节点元素
            if(type === 'add'){ //增加节点
                update(-1,data.id);

            } else if(type === 'update'){ //修改节点
                update(data.id,elem.find('.layui-tree-txt').html());
            } else if(type === 'del'){ //删除节点
                layer.confirm('确认删除吗？', {
                    btn: ['确认', '取消'] //可以无限个按钮
                    ,btn3: function(index, layero){
                        //按钮【按钮三】的回调
                    }
                }, function(index, layero){
                    del(data.id);
                }, function(index){
                    window.location.reload();
                });
            }
        },
        data: Alldata
    });
    function update(id,text) {
        var b = true;
        if(id==undefined){
            id=-1;
        }
        if(text=="未命名"){
            b= false;
            layer.msg('菜单名称不可为空', {
                icon: 2,
                time: 1000,
                end: function () {

                }
            })
        }
        if(b == false){
            setTimeout(function(){
            },2000);
            return;
        }
        if(id==-1){
        layer.open({
            type: 2,
            area:["100%", "100%"],
            content: 'editMenu2.html?id='+id+"&text="+text //这里content是一个普通的String
        });
        }else{
            layer.open({
                type: 2,
                area:["100%", "100%"],
                content: 'editMenu.html?id='+id+"&text="+text //这里content是一个普通的String
            });
        }        }
    function del(id) {
        if (id == 1) {
            layer.msg('根节点不可删除', {
                icon: 2,
                time: 1000,
                end: function () {
                    window.location.reload();
                }
            })
        }else{
            $.ajax({
                url:HOST+'admin/permission/PermissionDel',
                type:'post',
                dataType:'json',
                data:{
                    id:id,
                },
                success:function (data) {
                    if(data.code==200){
                        layer.msg('删除成功',{
                            icon:1,
                            time:1000,
                            end:function () {
                                window.location.reload();
                            }
                        })
                    }else {
                        layer.msg('删除失败', {
                            icon: 2,
                            time: 1000,
                            end: function () {
                                window.location.reload();
                            }
                        })
                    }
                }

            })
        }
    }

</script>
</html>
